<template>
	<view class="">
		<view class="title1"><view class="title1-view">司机扫描绑定ASN</view></view>
		<view class="Carform">
			<view class="cview">
				<text>车次</text>
				<view class="cright">{{ TruckTransportNO }}</view>
			</view>
			<view class="cview">
				<text>车辆</text>
				<view class="cright">{{ LicensePlateNO }}</view>
			</view>
		</view>
		<view class="c-card">
			<view class="cu-form-group" v-for="(item,index) in asnNoList" :key="item.field">
				<view class="title">单号</view>
				<input type="text" @input="input" :value="item.value" :name="item[field]"
				 placeholder="输入/扫描ASN单号" :data-index="index"
				 :data-value="item.value" :data-field="item.field">
				 </input>
				<text @click="scan(index)" class='lg text-gray cuIcon-scan'></text>
				<text @click="del(index)" :data-index="index"
				 v-if="index !== 0" class="margin-left-sm lg text-red cuIcon-delete"></text>
			</view>
		</view>
		<view class="text-right padding">
			<button class="cu-btn line-blue"
			 @click="add"
			 style="border-radius: 15px;">新增单号</button>
		</view>
		
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-blue lg" @click="bindCar">保存</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
			TruckTransportNO: '',
			LicensePlateNO: '',
			TruckTransportID:'',
			session: {},
			asnNoList: [{
				field: 'asnNo0',
				value: ''
			}],
		};
	},
	onLoad(e) {
		this.TruckTransportNO = e.id;
		this.LicensePlateNO = e.no;
		this.TruckTransportID=e.ttid;
		this.session = uni.getStorageSync('session') || {};
		
	},
	methods: {
		
		bindCar() {
			const checked = this.checkData(this.asnNoList);
			const nArr = this.asnNoList.map(item => {
				return {
					'InboundOrderNO': item.value
				}
			})
			const newArr = this.asnNoList.map(item => {
				return item.value
			})
			if (this.LicensePlateNO) {
				this.$store.dispatch('uni/AddBindGoods', {
					OpenID :this.session.openid,
					TruckTransportID:this.TruckTransportID,
					TruckTransportNO:this.TruckTransportNO,
					Status:0,
					
					LicensePlateNO:this.LicensePlateNO,
					
					DetailList:nArr,
				}).then((res) => {
					const {Code,Data,Message} = res;
					console.log('Message',Message)
					if(Code===0){
						uni.showModal({
							title: Message +':',
							content:newArr.join(','),
							success: (res) => {
								uni.navigateBack({
									delta: 1
								})
								/* uni.navigateTo({
									url:'pages/lineUp/bindGoodsCar'
								}) */
							}
						})
					}else{
						uni.showModal({
							title: '提示：',
							content: Message,
						})
					};
					this.asnNoList=[{
						field: 'asnNo0',
						value: ''
					}]
				})
				
			} else {
				showModal({
					title: '提示',
					content: '请先填写信息，再绑定'
				})
			}
		},
		checkData(data) {
			let flag = false;
			data && data.length > 0 && data.forEach(v => {
				if (v.value) flag = true;
				return;
			})
			return flag
		},
		add() {
			const index = this.asnNoList.length + 1;
			this.asnNoList.push({
				field: 'asnNo' + index,
				value: ''
			});
		},
		del(index) {
			/* const {
				index
			} = e.currentTarget.dataset; */
			this.asnNoList.splice(index, 1);
		},
		input(e) {
			const {
				index
			} = e.currentTarget.dataset;
			this.asnNoList[index].value = e.target.value;
		},
		scan(index) {
			uni.scanCode({
				success: res => {
					//const value = res.result
					this.asnNoList[index].value=res.result
					
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.title1 {
	height: 80upx;
	background-color: #ffffff;
	color: #2a8cf6;
	margin-bottom: 40upx;
	&-view {
		line-height: 80upx;
		text-align: center;
		font-size: 16px;
	}
}
.Carform {
	width: 345px;
	margin: 0 auto;
	//padding: 0 20upx 0 0;
	#cno {
		border: 1upx solid #0081ff;
	}
	.scann {
		font-size: 18px;
	}
	.cview {
		display: flex;
		background-color: #ffffff;
		margin: 10upx 0 30upx 0;
		height: 100upx;
		line-height: 100upx;
		border: 1upx solid #f4f4f4;
		border-radius: 15upx;

		text {
			width: 150upx;
			text-align: center;
		}
		input {
			height: 100upx;
		}
		.cright {
			margin-left: 50upx;
		}
	}
	
}
.c-card {
	
		padding: 15px;
		border-radius: 15px;
		background-color: #fff;
		margin: 15px 15px 0;
	}
</style>
